<template>
    <div >
        <div class="zoom" v-if="viewSizeShow" ><div class="add" @click="addViews">+</div><div class="minus" @click="minusViews">-</div></div>
        <OrgChart v-model="treeData" :data="treeData" @onClick="onClick" @onDrop="onDrop" :set-width="orgBoxWidth" :set-zoom="viewSize" />
    </div>
</template>

<script>
import OrgChart from '@/components/orgChart/orgChart'
import { cardformInitDataForTree } from '@/api/api'
export default {
    name: 'app',
    components: {
        OrgChart
    },
    data() {
        return {
            treeData: [],
            orgBoxWidth: '350px',
            viewSize: 1,
            viewSizeShow: false
        }
    },
    computed: {

    },
    watch: {
        treeData: {
            handler(newVal, oldVal) {
                var widthArr = []
                function getChildren(obj) {
                    obj.forEach(element => {
                        widthArr.push({ 'type': parseInt(element.type), 'width': parseInt(element.list.list[0].options.width) })
                        if (element.children.length > 0) {
                            getChildren(element.children)
                        }
                    })
                }
                getChildren(newVal)
                var theW = 350
                widthArr.forEach((items, key) => {
                    if (key > 0) {
                        theW += items.width + 10
                    }
                })

                this.orgBoxWidth = theW + 'px'
            },
            deep: true
        },
        orgBoxWidth: {
            handler(newVal, oldVal) {
                // console.log(newVal, 'newVal')
            }
        }
    },
    async created() {
        this._cardformInitDataForTree()
    },
    methods: {
        onClick: function(node) {
            var theid = node.id
            // 点击增加节点
            this.addNodes(theid)
            console.log(this.orgBoxWidth, 'this.orgBoxWidth~~')
        },
        onDrop: function(event) {
            // console.log(event)
            // alert(event.node.label + ' was moved to ' + event.to.label + '.')
            // 换id,和type
            var start = event.node
            var end = event.to

            function transObjs(startObj, endObj) {
                var newStart = {}
                var newEnd = {}
                newStart.id = endObj.id
                newStart.type = endObj.type
                newStart.label = startObj.label
                newStart.list = startObj.list
                newStart.children = startObj.children
                newEnd.id = startObj.id
                newEnd.type = startObj.type
                newEnd.label = endObj.label
                newEnd.list = endObj.list
                newEnd.children = endObj.children
                // 这里取得的是交换的数组
                return [newStart, newEnd]
            }
            transObjs(start, end)

            var orgArr = this.treeData
            console.log(orgArr, 'orgArr ~~')
            // 先找到要替换的对象
            function transObj(arr, item) {
                arr.forEach(el => {
                    if (el.id == item.id) {
                        // 把替换好的对象加到选定的id,这个写法不对
                        el = item
                        console.log(el.id, 'el.id~~')
                    } else if (el.children.length > 0) {
                        transObj(el.children, item)
                    }
                })
                console.log(arr, 'arr~~')
                return arr
            }
            transObj(orgArr, transObjs(start, end)[0])
            transObj(orgArr, transObjs(start, end)[1])
        },

        _cardformInitDataForTree() {
            // 初始化的节点
            var id = 'null'
            var solutionId = '101'
            var nodeCode = 'STRVTREE_ID'
            var params = { formId: '7421' }
            cardformInitDataForTree(params, id, solutionId, nodeCode)
                .then(res => {
                    res.forEach(element => {
                        this.treeData.push(element)
                    })
                })
        },
        addNodes(theid) {
            // this.viewSizeShow = true
            var solutionId = '101'
            var nodeCode = 'STRVTREE_ID'
            var params = { formId: '7421' }
            if (typeof (theid) == 'string') {
                cardformInitDataForTree(params, theid, solutionId, nodeCode)
                    .then(res => {
                        console.log(res, 'res')

                        // 递归将值加到children里
                        function intoChildren(arr, eid) {
                            arr.forEach(item => {
                                if (eid == item.id) {
                                    item.children = res
                                } else if (res.length > 0) {
                                    intoChildren(item.children, theid)
                                }
                            })
                        }
                        intoChildren(this.treeData, theid)
                    })
            }
        },
        addViews() {
            var count = parseFloat(this.viewSize)
            if (count > 0 && count < 1) {
                count += 0.1
            } else if (count > 0.9) {
                count = 1
            }
            this.viewSize = parseFloat(count.toFixed(1))
        },
        minusViews() {
            // this.viewSize
            var count = this.viewSize

            if (count > 0.1) {
                count -= 0.1
            } else if (count < 0.1) {
                count = 0.1
            }

            this.viewSize = parseFloat(count.toFixed(1))
        }
    }
}
</script>
<style scoped>
.zoom{
  position:absolute;
  display: inline-block;
  z-index: 100;
  border-radius: 5px;
  width:30px;
  height:60px;
  background-color: #fff
}
.add{
    border-bottom:1px solid #999
}
.add,.minus{
    position: relative;
    float:left;
    width:30px;
    height:30px;
    text-align: center;
    line-height: 30px;
    cursor:pointer
}
</style>
